<template>
  <div>
    <headers>
      <span slot="left" class="left">&lt; 返回</span>
      <input type="text" slot="title" placeholder="回车搜索商品" class="title" v-model="value" @input="send">
    </headers>

    <van-row>
      <van-col span="6">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item v-for="(item, index) in classify" :key="index" :title="item.title" :name="item.type"
            @click="change(item.type)" />
        </van-sidebar>

      </van-col>
      <van-col span="18">
        <div>
          <ul class="uu">
            <li v-for="item in shoplist" :key="item.id">
              <img :src="item.icon" alt="">
              <p>{{item.name}}</p>
            </li>
          </ul>
        </div>
      </van-col>
    </van-row>




  </div>
</template>

<script>
  import headers from '../../components/headers';
  export default {
    data() {
      return {
        value: '',
        activeKey: '',
        classify: [{
            title: "所有分类",
            type: "all"
          },
          {
            title: "居家",
            type: "jujia2"
          },
          {
            title: "配件装饰",
            type: "peishi2"
          },
          {
            title: "服装",
            type: "fuzhuang2"
          },
          {
            title: "电器",
            type: "dianqi2"
          },
        ],
        shoplist: [],
        copyshoplist: []
      }
    },

    mounted() {
      this.$API.shop_category().then((res) => {
        // console.log(res);
        this.shoplist = res.data.data
        this.copyshoplist = res.data.data
      }).catch((err) => {
        console.log(err);
      });
    },
    components: {
      headers,
    },
    methods: {
      send() {
        // console.log(this.value);
      },
      change(type) {
        // console.log(type);
        this.shoplist = this.copyshoplist.filter(item => {

          if (type != "all") {
            return item.type == type
          } else {
            return item
          }
        })

      }
    },

  }
</script>

<style lang="scss" scoped>
  .left {
    color: blue;
  }

  .title {
    border-radius: 50px;
    width: 60vw;
    font-size: 12px;
    background-color: #F5F5F5;
    border: 0;

  }

  .uu {
    text-align: center;
    width: 100%;
    height: auto;
    overflow: scroll;
    display: flex;
    flex-flow: wrap;
    justify-content: space-evenly;
    align-items: center;
    justify-content: center;

    li {
      font-size: 12px;
      margin-top: 2vh;
      width: 33%;
      height: 10vh;

      img {
        width: 60%;
        height: 70%;
      }
    }
  }
</style>